<template>
	<div>
		<!-- 头部 -->
		<a-button type="plain" @click="toList" class="d-a-center">返回</a-button>
		<div style="margin-top: 10px">
			<text style="font-size: 20px">{{ emailForm.subject }}</text>
		</div>
		<a-form ref="searchRef" :model="emailForm" :hideRequiredMark="true" style="margin-top: 10px">
			<a-row>
				<a-col :span="14" :offset="0">
					<a-form-item name="emailForm.senderName" label="发件人">
						{{ emailForm.senderName }}【{{ emailForm.senderPhone }}@loto.com】
					</a-form-item>
				</a-col>
				<a-col :span="14" :offset="0">
					<a-form-item name="emailForm.recipientName" label="收件人">
						{{ emailForm.recipientName }}【{{
              emailForm.recipientPhone
            }}@loto.com】
					</a-form-item>
				</a-col>
				<a-col :span="14" :offset="0">
					<a-form-item name="emailForm.subject" label="时&nbsp;&nbsp;&nbsp;&nbsp;间">
						{{ emailForm.createdAt }}
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<a-form-item name="emailForm.person" label="附&nbsp;&nbsp;&nbsp;&nbsp;件" v-if="fujianLength != 0">
			<div style="height: 60px; display: flex; flex-wrap: wrap; padding-top: 0.35%" class="">
				{{ fujianLength }}个
				<a v-for="(item, index) in emailForm.attachments" :href="item.filePath" :key="index">
					【{{ item.fileName }}】,
				</a>
			</div>
		</a-form-item>
		<div v-html="emailForm.content" style="border: 1px solid #e9ebec; padding: 1%; border-radius: 5px"></div>
		<block v-if="huifuValue == '/email/all/look'">
			<a-button @click="replyVisible = 1" class="d-a-center" type="primary"
				style="margin-top: 20px">回复邮件</a-button>
			<div v-if="replyVisible == 1">
				<a-textarea v-model:value="replyForm.content" placeholder="请输入回复内容..."
					:auto-size="{ minRows: 3, maxRows: 5 }" style="margin-top: 20px" />
				<div class="df" style="margin-top: 20px">
					<a-button type="primary" @click="replayEmail" class="d-a-center">发送</a-button>
					<a-button @click="cancelReply" class="d-a-center" style="margin-left: 20px">取消</a-button>
				</div>
			</div>
		</block>
	</div>
</template>
<script>
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import router from "@/router/index.js";
	import {
		reactive,
		ref,
		toRefs,
		watch,
		computed,
		defineComponent,
		createVNode,
	} from "vue";
	import {
		CloseOutlined,
		PlusCircleOutlined,
		ApartmentOutlined,
		CheckCircleOutlined,
		CloseCircleOutlined,
		// 附件
		PaperClipOutlined,
		FileExcelOutlined,
		FileGifOutlined,
		FilePptOutlined,
		FileMarkdownOutlined,
		FileImageOutlined,
		FileJpgOutlined,
		FilePdfOutlined,
		FileZipOutlined,
		FileWordOutlined,
		FileTextOutlined,
		FileUnknownOutlined,
	} from "@ant-design/icons-vue";
	import {
		Modal,
		message,
		Empty
	} from "ant-design-vue";
	import {
		emailDetails,
		reply
	} from "@/api/email/index.js";
	export default {
		components: {},
		setup() {
			const router = useRouter();
			const route = useRoute();
			const data = reactive({
				emailForm: {},
				replyVisible: 0,
				replyForm: {
					content: "",
				},
				huifuValue: "",
				fujianLength: 0,
			});
			init();
			console.log("router", router.options.history.state.back);
			console.log("route.query.id", route.query.id);
			async function init() {
				data.huifuValue = router.options.history.state.back;
				let res = await emailDetails(route.query.id);
				if (res.success) {
					console.log("初始化数据", res);
					data.emailForm = res.object;
					data.emailForm.attachments = JSON.parse(res.object.attachments);
					data.fujianLength = data.emailForm.attachments.length;
					// console.log(JSON.parse(res.object.attachments));
				}
			}
			const toList = () => {
				console.log("router", router);
				router.back();
			};
			const downLoad = (filePath) => {};
			const replayEmail = async () => {
				console.log("回复邮件");
				let obj = {
					emailId: route.query.id,
					content: data.replyForm.content,
				};
				if (obj.content == "") {
					message.error("请填写回复内容！");
				} else {
					let res = await reply(obj);
					if (res.success) {
						console.log("回复参数", res);
						data.replyVisible = 0;
						message.success("发送成功");
					} else {
						message.error("发送失败");
					}
				}
			};
			const cancelReply = () => {
				console.log("回复收起");
				data.replyVisible = 0;
				data.replyForm.content = "";
			};
			const methods = {};
			return {
				...toRefs(data),
				...methods,
				toList,
				replayEmail,
				cancelReply,
				downLoad,
			};
		},
	};
</script>
<style scoped lang="less"></style>